import React, { useState, useEffect } from 'react';
import './index.less';
import { TreeSelect, Input, message } from 'antd';
import { Tree } from 'antd';
const { DirectoryTree } = Tree;
import { DownOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import axios from 'axios';
import { history, request } from 'umi';
function index() {
  const [treeData2, setData2] = useState();
  const [parentvalue, setparentvalue] = useState('');

  const [depart_id, setdepart] = useState('');
  const [sonvalue, setsonvalue] = useState('');

  const onChange = () => {
    console.log(789);
  };
  const onSelect = (keys, info) => {
    setparentvalue(info.departentName);
    setdepart(info._id);
    setsonvalue(sonvalue);
  };
  const onchangeSon = (e) => {
    setsonvalue(e.target.value);
  };
  const addDepart = () => {
    console.log(sonvalue);
    console.log(depart_id);

    let parent = 4;
    if (depart_id == '63dc651c4d6a6639369b0c33') {
      parent = 2;
    }
    if (depart_id == '63d8737f8458ebd8b874afc8') {
      parent = 3;
    }
    let newobj = {
      departentName: sonvalue,
      parent_id: depart_id,
      parent: parent,
    };
    request('/api/addDepart', {
      method: 'post',
      data: newobj,
    }).then((res) => {
      // 判断管理的弹出
      message.success('添加成功');
      getDepart();
    });
  };
  const delDepart = () => {
    console.log(sonvalue);
    request('/api/delDepart', {
      method: 'delete',
      params: {
        departentName: sonvalue,
      },
    }).then((res) => {
      // 判断管理的弹出
      message.success('删除成功');
      getDepart();
    });
  };
  const getDepart = async () => {
    request('/api/departPost', {
      method: 'get',
    }).then((res) => {
      // 判断管理的弹出
      console.log(res.departlist[0]);
      setData2(res.departlist);
    });
  };
  useEffect(() => {
    getDepart();
  }, []);

  return (
    <div className="setorg">
      <div className="header">
        <div className="headerbtn">
          <Button onClick={addDepart}>新增</Button>
        </div>
        <div className="headerbtn">
          <Button onClick={addDepart}>保存</Button>
        </div>
        <div className="headerbtn">
          <Button onClick={delDepart}>删除</Button>
        </div>
      </div>

      <div className="leftmain">
        {treeData2 && (
          <Tree
            showLine
            switcherIcon={<DownOutlined />}
            defaultExpandAll
            checkStrictly={true}
            treeData={treeData2}
          />
        )}
      </div>

      <div className="rightmain">
        <div className="rightform">
          <div>
            <span>上级部门</span>
            <TreeSelect
              showSearch
              style={{
                width: '75%',
                left: 15,
              }}
              value={parentvalue}
              dropdownStyle={{
                maxHeight: 400,
                overflow: 'auto',
              }}
              placeholder="Please select"
              allowClear
              treeDefaultExpandAll
              onChange={onChange}
              onSelect={onSelect}
              fieldNames={{ label: 'departentName', value: 'key' }}
              treeData={treeData2}
            />
          </div>

          <div style={{ marginTop: '15px' }}>
            <span>部分名称</span>
            <Input
              value={sonvalue}
              onChange={(e) => onchangeSon(e)}
              style={{ width: '75%', marginLeft: '10px' }}
            ></Input>
          </div>

          <div style={{ marginTop: '15px' }}>
            <span>是否分公司</span>
            <input type="radio" name="radio" style={{ marginLeft: '30px' }} />
            <input type="radio" name="radio" style={{ marginLeft: '30px' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default index;
